<!DOCTYPE html>
<html lang="zh-cn" ng-app>
<head>
    <meta charset="utf-8">

    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 360高速模式-->
    <meta name="description" content="bootstrap基本模板">
    <meta name="author" content="chengt01">
    <meta name="keywords" content="bootstrap,html5,css3">
    <title>index</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../styles/site.css"/>
    <!--[if lt IE 9]>
    <script src="../scripts/html5.min.js"></script>
    <script src="../scripts/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../scripts/angular-1.2.5.min.js"></script>

</head>

<body class="container">
<header class="page-header">
    <h1>index
        <small>Day01</small>
    </h1>
</header>

<div ng-controller="bookCtrl">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="b in books">
            <span class="glyphicon glyphicon-bookmark"></span>
            <span data-price="{{b.Price}}" ng-dblclick="showPrice($event.target)">{{b.Title}}</span>
            <span data-id="{{b.Id}}" ng-click="hideFunc($event.target)" style="cursor: pointer"
                  class="pull-right glyphicon glyphicon-remove"></span>
        </li>
    </ul>

</div>
<script>
    function bookCtrl($scope, $http) {
        $scope.showPrice=function(t){
            alert($(t).attr("data-price"));
        }
        $scope.hideFunc=function(t){
            alert($(t).attr("data-id"));
            $(t).parent().hide(1000);
        }
        $http.get("../json/books.json")
                .success(function (r) {
                    $scope.books = r;
                });
    }
</script>
<footer class="navbar-fixed-bottom label-info text-center">
    <p>
        Copyright &copy;
        <abbr title="tarnna">hajiang</abbr>&trade; 2015
    </p>
</footer>

</body>
</html>
